<script lang="ts" setup>
import type { FormInst, UploadCustomRequestOptions } from 'naive-ui';
import { NSpace, useMessage } from 'naive-ui';
import { ref } from 'vue';
import type { Fn } from '@vueuse/core';
import { lyla } from '@lylajs/web';
import { isSuccess } from '@/utils/response';
import { enumToOption } from '@/utils/enum';
import { useAuthStore } from '@/store/modules/auth';
import * as service from './api';
import { ImageTag, Privacy } from './enum';

const props = defineProps<{
  id: Fn;
  callback: Fn;
}>();

const message = useMessage();
const formInstRef = ref<FormInst | null>(null);
const detail = ref<any>({});
const dataForm = ref<any>({});
const showModal = ref(false);
const loading = ref<boolean>(false);
const authStore = useAuthStore();
const uploadRef = ref();
const tagOptions = enumToOption(ImageTag);
const privacyOptions = enumToOption(Privacy);

const rules = {};

async function open() {
  showModal.value = true;
  loading.value = true;
  try {
    const response = await service.detail({ id: props.id() });
    if (isSuccess(response)) {
      detail.value = response.data;
    }
  } finally {
    loading.value = false;
  }
}

function close() {
  dataForm.value = {};
  showModal.value = false;
}

function upload({ file, onFinish, onError, onProgress }: UploadCustomRequestOptions) {
  if (!dataForm.value.privacy) {
    message.error('请选择隐私类型');
    return;
  }
  const action = `/api/carbon-misc/private/admin/image/update?id=${props.id()}&tag=${dataForm.value.tag}&privacy=${dataForm.value.privacy}`;
  const headers: Record<string, string> = {};
  headers.Authorization = authStore.token;
  const form = new FormData();
  form.append('file', file.file as File);
  lyla
    .post(action, {
      withCredentials: true,
      headers,
      body: form,
      onUploadProgress: ({ percent }: any) => {
        onProgress({ percent: Math.ceil(percent) });
      }
    })
    .then(({ json }: any) => {
      if (isSuccess(json)) {
        onFinish();
        showModal.value = false;
        if (props.callback) {
          props.callback();
        }
      } else {
        message.error(json.msg);
      }
    })
    .catch((error: any) => {
      message.error(error.message);
      onError();
    });
}
</script>

<template>
  <NButton type="info" @click="open()">编辑</NButton>
  <n-modal v-model:show="showModal">
    <NSpace vertical>
      <n-spin v-if="loading" size="small" />
      <n-card v-else title="编辑" class="card">
        <n-form ref="formInstRef" :label-width="80" :model="dataForm" :rules="rules" label-placement="left">
          <n-form-item label="标签:" path="tag">
            <n-select v-model:value="dataForm.tag" :options="tagOptions"></n-select>
          </n-form-item>
          <n-form-item label="隐私:" path="privacy">
            <n-select v-model:value="dataForm.privacy" :options="privacyOptions"></n-select>
          </n-form-item>
          <n-form-item label="图片:" path="phone">
            <n-upload ref="uploadRef" :custom-request="upload">
              <n-button>上传文件</n-button>
            </n-upload>
          </n-form-item>
          <n-flex justify="end">
            <n-button @click="close()">取消</n-button>
          </n-flex>
        </n-form>
      </n-card>
    </NSpace>
  </n-modal>
</template>

<style scoped>
.card {
  width: 350px;
}
</style>
@/service/api/chat-user
